import React from 'react'
import {Form, Select, Input, Button, Divider, Row, Col } from 'antd'
import ProductItem from './ProductItem'
import ProductCategories from '../../helper/productCategories'
import { useDispatch, useSelector } from 'react-redux'
import { search_product } from '../../store/actions/search'
const { Option } = Select


function Search() {
	const dispatch = useDispatch()
	const categories = ProductCategories()
	const [form] = Form.useForm();
	const onFinish = (value) => {
		dispatch(search_product(value))
		form.resetFields()
	}
	const { result } = useSelector(state => state.search)
	return (
		<>
			<Form onFinish={onFinish} form={form} layout='inline' initialValues={{category: 'all'}}>
				<Input.Group compact>
					<Form.Item name="category" style={{width:'100px'}}>
      		  <Select>
							<Option value='all'>所有分类</Option>
							{
								categories.map(item => {
									return <Option key={item._id} value={item._id}>{item.name}</Option>
								})
							}
						</Select>
      		</Form.Item>
					<Form.Item name="search">
      		  <Input placeholder="请输入搜索关键字"/>
      		</Form.Item>
					<Form.Item>
      		  <Button type="primary" htmlType="submit">
							搜索
						</Button>
      		</Form.Item>
				</Input.Group>
			</Form>
			<Divider />
			<Row gutter={[16,16]}>
					{
						result.map(item => {
							return (
								<Col span={6} key={item._id}>
									<ProductItem product={item}/>
								</Col>
							)
						})
					}
			</Row>
		</>
	)
}

export default Search
